<template>
  <div
    class="floating-ball">
    <!-- 悬浮球图标，绑定点击、双击、触摸事件 -->
    <img src="../../image/悬浮球.png" alt="悬浮球图标"
    @touchstart="onTouchStart"   
    @touchmove="onTouchMove"    
    @touchend="onTouchEnd"  
    @dblclick="onDoubleClick"  
    @click="onFloatingBallClick" />
    <!-- 悬浮球菜单，当isMenuVisible为true时显示 -->
    <div class="floating-ball-menu" v-if="isMenuVisible" >
      <!-- 首页菜单项，点击时跳转到首页 -->
      <div class="menu-item" @click="goback(1)">首页</div>
      <!-- 会员菜单项，点击时跳转到会员页面 -->
      <div class="menu-item" @click="goback(2)">会员</div>
      <!-- 健康菜单项，点击时跳转到健康页面 -->
      <div class="menu-item" @click="goback(3)">健康</div>
      <!-- 问诊菜单项，点击时跳转到问诊页面 -->
      <div class="menu-item" @click="goback(4)">问诊</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 获取路由实例
const router = useRouter();
// 悬浮球位置
const ballPosition = ref({
  x: 300,
  y: 100
});
// 初始触摸位置
let startX = 0;
let startY = 0;
// 是否正在拖动
let isDragging = false;
// 触摸开始时间
let touchStartTime = 0;
// 长按阈值
const longPressThreshold = 1000;
// 悬浮球颜色
const ballColor = ref('#ccc');
// 上一次点击时间
let lastClickTime = 0;
// 双击阈值
const doubleClickThreshold = 300;
// 悬浮球大小
const ballSize = ref(30);
// 是否显示菜单
const isMenuVisible = ref(false);
// 页面宽度
const pageWidth = window.innerWidth;
// 页面高度
const pageHeight = window.innerHeight;

// 触摸开始事件
const onTouchStart = (e: TouchEvent) => {
  e.stopPropagation();
  startX = e.touches[0].pageX;
  startY = e.touches[0].pageY;
  isDragging = true;
  touchStartTime = Date.now();
  ballColor.value = '#e6f7ff';
};

// 触摸移动事件
const onTouchMove = (e: TouchEvent) => {
  e.stopPropagation();
  if (isDragging) {
    // 更新悬浮球的位置，同时限制其不能超出页面可视范围
    const newX = Math.min(Math.max(ballPosition.value.x + (e.touches[0].pageX - startX), 0), pageWidth - ballSize.value);
    const newY = Math.min(Math.max(ballPosition.value.y + (e.touches[0].pageY - startY), 0), pageHeight - ballSize.value);
    ballPosition.value = { x: newX, y: newY };
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
  }
};

// 触摸结束事件
const onTouchEnd = (e: TouchEvent) => {
  e.stopPropagation();
  isDragging = false;
  const touchDuration = Date.now() - touchStartTime;
  if (touchDuration < longPressThreshold) {
    onFloatingBallClick();
  } else {
  }
  ballColor.value = '#ccc';
};
// 悬浮球点击事件
const onFloatingBallClick = () => {
  const currentTime = Date.now();
  if (currentTime - lastClickTime < doubleClickThreshold) {

    if (ballSize.value === 30) {
      ballSize.value = 40;
    } else {
      ballSize.value = 30;
    }
    lastClickTime = 0;
  } else {
    isMenuVisible.value = !isMenuVisible.value;
    lastClickTime = currentTime;
  }

};
// 菜单项点击事件
const goback = (name:any) =>{
if(name == 1) router.push('/');
if(name == 2) router.push('/home/member');
if(name == 3) router.push('/home/health');
if(name == 4) router.push('/home/inquiry');
}
// 暴露属性
defineExpose({
  ballPosition,
  ballColor,
  ballSize,
  isMenuVisible
});
</script>

<style scoped lang="scss">
.floating-ball {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: v-bind(ballColor);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  img {
    width: 100%;
    height: 100%;
  }
  touch-action: none; // 禁止默认的触摸行为
}

.floating-ball-menu {
  position: absolute;
  top: 45px;
  left: -40px;
  width: 120px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 999;
}
.menu-item {
  padding: 4px 8px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f0f0f0;
}
</style>